<template>
  <!-- 留言注册 -->
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="user">
      <el-input v-model="ruleForm.user"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" :type="passText"></el-input>
      <span class="iconfont icon-Eyesclosed eyedown" v-show="queflag" @click="yuanb2"></span>
      <span class="iconfont icon-icon-eye-open eyeup" v-show="!queflag" @click="yuanz2"></span>
    </el-form-item>

    <el-form-item label="确认密码"  prop="password2">
      <el-input v-model="ruleForm.password2" :type="passwordText"></el-input>
      <span class="iconfont icon-Eyesclosed eyedown" v-show="miflag" @click="yuanb1"></span>
      <span class="iconfont icon-icon-eye-open eyeup" v-show="!miflag" @click="yuanz1"></span>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="regSubmit('ruleForm')">注册</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "BlogRegistered",
  data() {
    return {
      passText:"password",
      passwordText:"password",
      queflag: true,
      miflag: true,
      ruleForm: {
        //表单的数据对象
        user: "",
        password: "",
        password2: "",
      },
      rules: {
        //表单的验证规则，  与标签中的prop属性值对应
        user: [
          //trigger:'blur'表示光标离开再触发
          { required: true, message: "请输入用户名"},
          { //rule当前规则对象，  value表示绑定的input的value值， callback表示表单校验完成
            validator(rule, value, callback){
              // callback();不传值不表示校验成功
              // callback(new Error("传入校验不成功"));传值就是校验不成功

              // 1，校验用户名长度
              if(value.length <2 ||value.length>8){
                // 如果校验失败就不继续执行了
                 return callback(new Error("请输入2 ~ 8位字符"));
              };
              // 2，字符验证，正则表达式 匹配中文，英文字母和数字及_:
              if(/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value)){
                callback();//符合规则校验成功
              }else{
                callback(new Error("用户名由中英文及数字_组成"));
              };
            },
          }
        ],
        password: [
          {required: true,message: "请输入密码",trigger:"blur"},
          {  
            validator(ruler, value, callback){
              // 1，校验密码的长度
              if(value.length <6 || value.length >18 ){
                return callback(new Error("请输入6 ~ 18位密码"));
              };
              // 2，校验密码字符验证，正则表达式
              if(/^[a-zA-Z]\w{5,17}$/.test(value)){
                callback(); //校验成功
              }else{
                callback(new Error("以字母包含字符数字下划线"));
              };
          
            }
          }
        ],
        password2: [
          {required: true,message: "请确认密码", trigger: "blur"},
          { //遇到函数嵌套式，this指向的是它本身，因此需要用箭头函数
            validator:(ruler, value, callback)=>{
              // 2，校验两次密码是否一致
              if(this.ruleForm.password === value){
                callback(); //校验成功
              }else{
                callback(new Error("两次密码不一致"));
                
              };
            }
          }
        ],
      },
    };
  },
  methods: {
    regSubmit() {
      // 提交表单
      //点击提交后触发的事件
      // 首先验证表单
      // $refs表示不断接收ref
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) { //表示表单数据验证成功
         let {data} = await this.$axios({ //发起请求属于异步操作，用async处理，await等待出结果
            method:"POST",  //post请求方式
            url:"/rule",    //发起请求地址
            data:{ //发送数据写在这里
            // 发送用户名和密码
              user:this.ruleForm.user,
              password:this.ruleForm.password,
            }
          });
         
          console.log(data, this.$message);
          if(data.code){
             //注册失败
             this.$message.error("当前用户名已被注册");
          }else{
             //注册成功
             this.$message.success("注册成功");
             this.$refs.ruleForm.resetFields();  //表单重置
          }
         
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      //重置表单
      this.$refs[formName].resetFields();
    },
     // 密码
    yuanb2() {
      this.passText = "text";
      this.queflag = false;
    },
    yuanz2() {
      this.passText = "password";
      this.queflag = true;
    }, 
    yuanb1() {
      this.passwordText = "text";
      this.miflag = false;
    },
    yuanz1() {
      this.passwordText = "password";
      this.miflag = true;
    },
    
  },
};
</script>

<style lang="less" scoped>
// 表单部分
.el-input {
  // text-align: center;
  width: 150px;
}
/deep/ .el-form {
  width: 500px;
  text-align: center;
  margin: 0 auto;
}
/deep/ .el-form-item__label {
  text-align: left;
}
.el-form-item:nth-child(5) /deep/ .el-form-item__label {
  padding-left: 12px;
}
.el-form-item /deep/ .el-form-item__content {
  flex: 0 !important;
}
.el-form {
  text-align: center;
}
.el-form-item__content .el-textarea /deep/ .el-textarea__inner {
  display: block;
  width: 315px;
  height: 120px;
  resize: none;
}
.el-form /deep/ .el-form-item:last-child {
  display: inline-block;
  width: 300px;
  padding-left: 0;
}
.el-form .el-form-item:last-child /deep/ .el-form-item__content {
  margin-left: 0 !important;
  width: 116% !important;
}
.el-form-item .el-form-item__content /deep/ .el-button--primary {
  padding-right: 50px;
  display: block;
}
.el-form-item__content .el-input /deep/ .el-input__inner {
  width: 150px !important;
}
.el-form-item .el-form-item__content /deep/ .el-input[data-v-484c1c11] {
  width: 150px;
}
.el-input {
  position: relative;
  // width: 240px;
}
.el-form-item__content .eyedown,
.el-form-item__content .eyeup {
  position: absolute;
  top: 0px;
  right: 4px;
  cursor: pointer;
}
/deep/ .el-input__inner {
  padding: 0 20px 0 15px;
}

</style>